{extend name="./tpl/default/mobile/public/layout.html" /}
{block name="header"}
<link rel="stylesheet" href="/public/home/mobile/css/member/sousuo.css">
<link rel="stylesheet" href="/public/plugins/dropload/dropload.css">
{/block}
{block name="head"}
<div class="am-g" style=" overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height: 45px; border-bottom:1px solid #ccc;">
    <div class="am-u-sm-10">
        <a href="" onclick="history.back(-1)">
        <span class="icon iconfont icon-xiangzuojiantou"></span>搜索
            </a>
    </div>
    <!--<div class="am-u-sm-2" style="padding-left: 32px;">

        <span class="icon iconfont icon-gouwuche"></span>
    </div>-->
</div>
{/block}
{block name="body"}
<div class="am-g" style=" overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
    <div class="am-u-sm-12" style="margin-bottom: 10px;">
        <input type="text" class="" id="goods_name" name="goods_name" placeholder="输入关键字" style="
        background:#ffffff;width:100%;height: 37px;outline: none;margin-top: 10px;" value="">
       <button type="submit" class="am-btn am-btn-primary am-btn-block" onclick="msearch()" style="    color: black;display: inherit;width: 20px;height: 15px;background-color: #fff;border-color: #fff;position: absolute;z-index: 99;top: 11px;right: 25px;outline: none;"><span class=" icon iconfont icon-chaxun"></span></button>
    </div>
</div>
<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="margin-top:0;">
    <div class="am-list-news-bd">
        <ul class="am-list" id="list">
         
        </ul>
    </div>

</div>
<div id="page"></div>

{/block}
{block name="script"}
<script src="/public/plugins/dropload/dropload.min.js"></script>
<script src="/public/plugins/template/template.js"></script>
<script type="text/html" id="list-tpl">
    {{ each data as value index}}
    <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
        <div class="am-u-sm-4 am-list-thumb">
            <a href="{{ value.url}}" class="">
                <img src="{{ value.goods_thumb}}" alt="{{ value.fulltitle}}"/>
            </a>
        </div>

        <div class=" am-u-sm-8 am-list-main">
            <h3 class="am-list-item-hd">
                <a href="{{ value.url}}" class="">{{ value.fulltitle}}</a>
            </h3>

            <div class="am-list-item-text">
                价格：{{ value.simple_price}}元
            </div>

        </div>
    </li>
    {{ /each}}
</script>
<script>
    var datas = {
        goods_name:'{$goods_name}',
        page: 0
    };
    var drop = $('#page').dropload({  //定义检测的容器
        scrollArea: window,
        loadDownFn: function (me) {		//loadDownFn是检测是否加载下方，其余方向请到文档中查看
            datas.page++;			//每次都需要将页码加1
            // 拼接HTML
            $.ajax({
                type: 'POST',
                url: '{:url("search")}', data: datas, success: function (data) {
                    if (data.code == 0) {
                        layer.open({
                            content: data.msg
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                        });
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    var html = template('list-tpl', data);		//此处使用的是上章节介绍的模板引擎
                    $('#list').append(html);		//将生成好的html插入放置列表的容器内
                    if (datas.page >= data.last_page) {		//检测是否加载到最后一页
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    me.resetload();			//这句必须写
                }
            });

        }
    });
    function msearch() {
        datas.goods_name=$('#goods_name').val();
        datas.page=0;
        drop.noData(false);
        drop.unlock();
        $('#list').empty();
        drop.resetload();
    }
</script>
{/block}
